<template>
  <el-container style="height: calc(100% - 66px)">
    <el-aside width="auto" style="height: 100%">
      <div
        class="ps-panel nav-left-menu main-menu"
        style="width: 64px; height: 100%"
      >
        <div class="ps-panel-head">
          <i
            class="ps-panel-head-icon iconfont icon-link"
            style="display: none"
          ></i>
          <span class="ps-panel-head-title" style="display: none"
            >数据组织</span
          >
          <button
            type="button"
            class="iconfont icon-screen menuTensile ps-right"
            v-on:click="menuTensile"
          ></button>
        </div>

        <div class="ps-panel-body">
          <el-menu
            :default-active="active"
            router
            class="el-menu-vertical"
            :collapse="isCollapse"
          >
            <el-submenu index="/connect/database" popper-class="menu1">
              <template slot="title">
                <i class="iconfont icon-database" style="color: #3378f7"></i>
                <span class="menu-title">
                  <span class="ps-left">数据库</span>
                  <i class="icon-tag ps-right">{{ dbData.length }}</i>
                </span>
              </template>
              <el-menu-item
                v-for="(item, index) in dbData"
                :key="index"
                :index="'/connect/database?dicLabelAttId=' + item.id"
                >{{ item.source_name }}</el-menu-item
              >
            </el-submenu>

            <el-menu-item index="#">
              <i class="iconfont icon-excel" style="color: #23bf97"></i>
              <span slot="title">结构化信息源</span>
            </el-menu-item>

            <el-menu-item index="/connect/images?type=1">
              <i class="iconfont icon-document" style="color: #fac751"></i>
              <span slot="title">态势文档</span>
            </el-menu-item>

            <el-menu-item index="/connect/images?type=2">
              <i class="iconfont icon-document" style="color: #fac751"></i>
              <span slot="title">日志文档</span>
            </el-menu-item>

            <el-menu-item index="/connect/images?type=0">
              <i class="iconfont icon-webpage" style="color: #f03d39"></i>
              <span slot="title">网页</span>
            </el-menu-item>
            <el-submenu
              index="/connect/unstructureFile?type=word"
              popper-class="menu1"
            >
              <template slot="title">
                <i class="iconfont icon-batch" style="color: #f03d39"></i>
                <span>非结构化数据</span>
              </template>
              <el-menu-item
                v-for="(a, i) in unstructuredlist"
                :index="a.index"
                :key="i"
                >{{ a.name }}</el-menu-item
              >
            </el-submenu>
            <!--<el-menu-item index="/connect/images?type=image">-->
            <!--<i class="iconfont icon-images" style="color: #f03d39;"></i>-->
            <!--<span slot="title">图片</span>-->
            <!--</el-menu-item>-->
          </el-menu>
        </div>
      </div>
    </el-aside>
    <el-main>
      <router-view
        style="height: 100%; background-color: #fff; overflow: auto"
      ></router-view>
    </el-main>
  </el-container>
</template>

<script>
import $ from "jquery";

export default {
  name: "connectApp",
  data () {
    return {
      isCollapse: true,
      active: "",
      dialogTableVisible: false,
      dbData: [],
      unstructuredlist: [{
        index: "/connect/unstructureFile?type=word",
        name: "word文件",
      },
      {
        index: "/connect/unstructureFile?type=PPT",
        name: "PPT",
      },
      // {
      //   index: "/connect/unstructureFile?type=WPS",
      //   name: "WPS",
      // },
      {
        index: "/connect/unstructureFile?type=csv",
        name: "csv",
      },
      {
        index: "/connect/unstructureFile?type=EXCEL",
        name: "EXCEL",
      },
      {
        index: "/connect/unstructureFile?type=PDF",
        name: "PDF",
      },
      {
        index: "/connect/unstructureFile?type=TXT",
        name: "TXT",
      },
      // {
      //   index: "/connect/unstructureFile?type=HTML",
      //   name: "HTML",
      // },
      {
        index: "/connect/unstructureFile?type=XML",
        name: "XML",
      },
      {
        index: "/connect/unstructureFile?type=JSON",
        name: "JSON",
      },
      {
        index: "/connect/unstructureFile?type=rtf",
        name: "rtf",
      },
      {
        index: "/connect/unstructureFile?type=py",
        name: "py",
      },
      {
        index: "/connect/unstructureFile?type=7z",
        name: "7z",
      },
      {
        index: "/connect/unstructureFile?type=zip",
        name: "zip",
      },
      ],
    };
  },
  methods: {
    menuTensile: function () {
      // eslint-disable-next-line
      let $navMenu = $(".main-menu");
      // eslint-disable-next-line
      this.isCollapse === true ?
        ($($navMenu).css("width", "268px"),
          $($navMenu).find("span").eq(0).css("display", "block"),
          $($navMenu).find("i").eq(0).css("display", "block")) :
        ($($navMenu).css("width", "64px"),
          $($navMenu).find("span").eq(0).css("display", "none"),
          $($navMenu).find("i").eq(0).css("display", "none"));
      this.isCollapse = !this.isCollapse;
    },
    getIndex (index, num) {
      return num + "-" + index;
    },
  },
  mounted () {
    this.$store.dispatch("ajaxSetting", {
      // this.$store.dispatch("ajax", {
      url: "/api/converter/getTableName",
      method: "get",
      data: {
        page: 1,
        number: 99
      },
      succeed: (res) => {
        // console.log(res);
        this.dbData = res.rows;
        if (
          this.$route.path.indexOf("/connect/database") === 0 &&
          res.rows.length > 1
        ) {
          console.log(this.active)
          if (Object.keys(this.$route.query).length > 0) {
            this.active = decodeURIComponent(this.$route.fullPath);
          } else {
            this.active = "/connect/database?dicLabelAttId=" + res.rows[0].id;
          }
          console.log(this.active)
          this.$router.push({
            path: this.active
          });
        }
      },
    });
    if (this.$route.path.indexOf("/connect/images") === 0) {
      this.active = "/connect/images?type=" + this.$route.query.type;
      this.$router.push({
        path: this.active
      });
    }
    if (this.$route.path.indexOf("/connect/unstructureFile") === 0) {
      if (Object.keys(this.$route.query).length > 0) {
        this.active = decodeURIComponent(this.$route.fullPath);
      } else {
        this.active = this.unstructuredlist[0].index;
      }
      this.$router.push({
        path: this.active
      });
    }
  },
};
</script>
<style>
.menu1 {
  width: auto !important;
  height: 550px !important;
  overflow: auto;
}
</style>